import Vue,{PropOptions,VNode} from 'vue';
import {QIcon} from 'quasar';
/**
 * 按钮类型
 */
export type ButtonType='default'|'primary'|'info'|'success'|'warning'|'error';
/**
 * 按钮
 * @author 唐国雄
 * @date 2021/7/20
 * 属性----------------------
 * :type		按钮类型, ButtonType
 * :outline		线条模式, boolean
 * :rounded		圆角模式, boolean
 * :round		圆形模式, boolean
 * :icon		图标, string
 * :disable		禁用, boolean
 * :loading		加载状态, boolean
 * 事件----------------------
 * @click
 * 插槽----------------------
 * #default		默认内容
 * #loading		加载中内容
 */
export default Vue.extend({
	name:'Button',
	props:{
		//按钮类型
		type:{
			type:String,
			default:'default',
			validator(v){
				return [
					'default',
					'primary',
					'info',
					'success',
					'warning',
					'error',
				].indexOf(v)!==-1;
			}
		} as PropOptions<ButtonType>,
		//线条模式
		outline:Boolean,
		//圆角模式
		rounded:Boolean,
		//圆形模式
		round:Boolean,
		//图标
		icon:String,
		//禁用
		disable:Boolean,
		//加载状态
		loading:Boolean,
	},
	computed:{
		classes():string{
			return 'lexmis-Button'+
				` lexmis--${this.type}`+
				(this.outline?' lexmis--outline':' lexmis--fill')+
				(this.forbid?' lexmis--forbid':' lexmis--hoverable')+
				(this.rounded?' lexmis--rounded':'')+
				(this.round?' lexmis--round':'');
		},
		//禁止点击
		forbid():boolean{
			return this.disable||this.loading;
		},
	},
	methods:{
		$_lexmis_onClick(){
			if(!this.forbid){
				this.$emit('click');
			}
		}
	},
	render(h):VNode{
		const {loading,default:slot}=this.$scopedSlots;
		return h('div',{
			staticClass:this.classes,
			attrs:{
				tabindex:this.forbid?-1:0,
			},
			on:{
				click:this.$_lexmis_onClick
			}
		},[
			this.loading
				?(loading
					?loading(undefined)
					:'加载中')
				:[
					this.icon
						?h(QIcon,{
							props:{
								name:this.icon
							}
						})
						:null,
					slot
						?h('div',{
							staticClass:'lexmis_content',
						},slot(undefined))
						:null
				]
		]);
	}
});
